<form class="layui-form layui-user-from" method="post">
        <div class="layui-row">
            <div class="layui-col-md3 layui-col-sm12">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="contactName"   placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-bg-lightblue" lay-submit lay-filter="contactsSearch">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">清空</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <table  id="contactsId" lay-filter="contactsId" lay-skin="line"></table>
    <script type="text/html" id="contactsToolbar">
        <div class="layui-btn-container">
            <div class="layui-btn-container">
                <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="addContacts">新增加联系人</a>
                <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="delsContacts">批量删除</a>
                <!--        <button class="layui-btn layui-btn-xs layui-btn-primary">短信</button>
                        <button class="layui-btn layui-btn-xs layui-btn-primary">邮件</button>
                        <button class="layui-btn layui-btn-xs layui-btn-primary">加入订单</button>
                        <button class="layui-btn layui-btn-xs layui-btn-primary">加入收藏</button>
                        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-filter="moreFunction">更多功能</button>-->
            </div>
        </div>
    </script>
<script type="text/html" id="sex">
    {{#  if(d.sex == 0){ }}
    {{d.sexName}}
    {{#  } }}
    {{#  if(d.sex == 1){ }}
    {{d.sexName}}
    {{#  } }}
</script>
<script>
    layui.use(['form', 'table', 'miniPage', 'element', 'laydate', 'dropdown', 'laytpl'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            dropdown = layui.dropdown;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        /**
         * 日期范围
         **/
        laydate.render({
            elem: '#dateRange'
            ,range: true
        });

        /**
         * 数据快速查看
         **/
        var tableIns = table.render({
            elem: '#contactsId',
            url: 'api/customer/contacts.json',
            toolbar: '#contactsToolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [],
            skin: 'line',
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {field: 'id', align:'center', title: '联系人编号', sort: true},
                    {field: 'contactName',align:'center', title: '联系人姓名',event: 'setSign', style:'cursor: pointer;color:#01AAED'},
                    {field: 'mobile', align:'center',  title: '手机'},
                    {field: 'email', align:'center',  title: '邮箱'},
                    {field: 'address', align:'center',  title: '地址'},
                    {field: 'sex', align:'center',  title: '性别',templet: '#sex'},
                    {field: 'ownerBy', align:'center',  title: '负责人'},
                    {field: 'createTime',  align:'center',title: '创建日期'},
                    {field: 'createBy', align:'center', title: '创建者'},
                    {title: '操作',  fixed: "right", align: "center", templet: function(d){
                            return '<button class="layui-btn layui-btn-xs layui-btn-primary" lay-filter="operation"><i class="fa fa-align-justify"></i></span>';
                        }
                    }
                ]
            ],
            page: true, //开启分页
            request: {
                pageName: 'pageIndex', // page
                limitName: 'pageSize' // limit
            }
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            },
            done: function(res, curr, count){
                dropdown.suite("[lay-filter='operation']", {
                    align: "right",
                    zIndex: 10000,
                    menus: [
                        {txt: "关注", event: "focus"},
                        {txt: "编辑联系人", event: "editContacts"},
                        {txt: "删除联系人", event: "delContacts"},
                    ]
                });
            }
        });
        form.on('submit(contactsSearch)', function(data){
            data.field.pageIndex = 1;
            tableIns.reload({
                where: data.field
            });
            return false;
        });


        //工具栏事件
        table.on('toolbar(contactsId)', function(obj){
            //var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addContacts':
                    var content = miniPage.getHrefContent('page/customer/client_edit_contacts.html');<!--此处替换添加控制器地址-->
                    layer.open({
                        title: '添加联系人',
                        area:['80%','80%'],
                        type: 1,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        content: content,
                        end: function () {
                            //执行重载
                            table.reload('contactsId', {
                                /*page: {
                                    curr: 1 //重新从第 1 页开始
                                }*/
                            }, 'data');
                        }
                    });
                    break;
                case 'delsContacts':
                    layer.confirm('确定要删除吗', {icon: 2, title: '提示'}, function (index) {
                        var checkStatus = table.checkStatus('contactsId')
                            ,data = checkStatus.data;
                        if(data.length == 0){
                            parent.layer.msg('请选择删除的联系人', {
                                time: 1000, //1s后自动关闭
                            });
                            return false;
                        }
                        layer.confirm('真的删除联系人吗？',{icon: 3, title: '提示'}, function(index){
                            var _contactsJson = JSON.stringify(data);
                            <!--此处替换为批量删除接口地址-->
                            $.post('/api/customer/del.json', {contactsIds:_contactsJson}, function (res) {
                                if (res.code == 0) {
                                    parent.layer.msg(res.message, {
                                        time: 1000, //1s后自动关闭
                                    });
                                    location.reload();
                                } else {
                                    parent.layer.msg(res.message, {
                                        time: 1000, //1s后自动关闭
                                    });
                                    return false;
                                }
                            }, "json")
                        });
                    });
                    break;
            };
        });

        //监听工具条
        table.on('tool(contactsId)', function (obj) {
            var data = obj.data;
            var _contactsid  = data.id;
            switch(obj.event){
                case 'editContacts':
                    var content = miniPage.getHrefContent('page/customer/client_edit_contacts.html');
                    if (content) {
                        var index = layer.open({
                            title: '编辑联系人',
                            area:['80%','80%'],
                            type: 1,
                            shade: 0.2,
                            maxmin:true,
                            shadeClose: true,
                            content: content
                        });
                    }
                    break;
                case "delContacts":
                    <!--此处替换为删除接口地址-->
                    layer.confirm('确定要删除吗', {icon: 2, title: '提示'}, function (index) {
                        $.post('/api/customer/del.json/'+_contactsid, {id: _userid}, function (res) {
                            if (res.code == 0) {
                                parent.layer.msg(res.message, {
                                    time: 1000, //1s后自动关闭
                                });
                                location.reload();
                            } else {
                                parent.layer.msg(res.message, {
                                    time: 2000, //2s后自动关闭
                                });
                                layer.closeAll();
                            }
                        }, "json")
                    });
                    break;
                case  "setSign":
                    var content = miniPage.getHrefContent('page/customer/client_contacts_detail.html');<!--此处替换添加控制器地址-->
                    layer.open({
                        title: '详情',
                        area:['80%','80%'],
                        type: 1,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        content: content
                    });
                    break;
            }
        });


    });
</script>